{% extends 'base.html' %}
{% load static %}

{% block title %}{{ profile_user.username }}的主页 - 本地有约{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <!-- 用户信息 - 左侧列 -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-body text-center">
                    <img src="{{ profile_user.avatar.url|default:'/static/images/default-avatar.jpg' }}"
                         class="rounded-circle mb-3" width="120" height="120" alt="头像">
                    <h3>{{ profile_user.username }}</h3>

                    {% if profile_user.bio %}
                    <p class="text-muted mb-3">{{ profile_user.bio }}</p>
                    {% endif %}

                    <!-- 所在地 - 根据隐私设置显示 -->
                    {% if profile_user.location and profile_user.show_location %}
                    <p class="text-muted mb-4">
                        <i class="fas fa-map-marker-alt me-2"></i>{{ profile_user.location }}
                    </p>
                    {% endif %}

                    <!-- 统计信息 -->
                    <div class="row text-center mb-4">
                        <div class="col-4">
                            <div class="h5 mb-1">{{ followers_count }}</div>
                            <small class="text-muted">粉丝</small>
                        </div>
                        <div class="col-4">
                            <div class="h5 mb-1">{{ following_count }}</div>
                            <small class="text-muted">关注</small>
                        </div>
                        <div class="col-4">
                            <div class="h5 mb-1">{{ posts_count }}</div>
                            <small class="text-muted">帖子</small>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="d-grid gap-2">
                        {% if user.is_authenticated and user != profile_user %}
                        <button class="btn {% if is_following %}btn-success{% else %}btn-primary{% endif %}"
                                id="followButton" onclick="toggleFollow({{ profile_user.id }})">
                            <i class="fas {% if is_following %}fa-check{% else %}fa-plus{% endif %} me-2"></i>
                            {% if is_following %}已关注{% else %}关注{% endif %}
                        </button>
                        <button class="btn btn-outline-primary" onclick="sendMessage({{ profile_user.id }})">
                            <i class="fas fa-envelope me-2"></i>发私信
                        </button>
                        {% elif user == profile_user %}
                        <a href="{% url 'customer:profile' %}" class="btn btn-primary">
                            <i class="fas fa-edit me-2"></i>编辑资料
                        </a>
                        {% else %}
                        <a href="{% url 'customer:login' %}" class="btn btn-primary">登录后关注</a>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 详细信息 -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>详细信息</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>加入时间：</strong>
                        <span class="text-muted">{{ profile_user.date_joined|date:"Y年m月d日" }}</span>
                    </div>

                    <!-- 邮箱 - 根据隐私设置显示 -->
                    {% if profile_user.email and profile_user.show_email %}
                    <div class="mb-3">
                        <strong>邮箱：</strong>
                        <span class="text-muted">{{ profile_user.email }}</span>
                    </div>
                    {% elif not profile_user.show_email and user == profile_user %}
                    <div class="mb-3">
                        <strong>邮箱：</strong>
                        <span class="text-muted"><i class="fas fa-lock text-warning me-1"></i>已隐藏</span>
                    </div>
                    {% endif %}

                    <!-- 手机号 - 根据隐私设置显示 -->
                    {% if profile_user.phone and profile_user.show_phone %}
                    <div class="mb-3">
                        <strong>手机号：</strong>
                        <span class="text-muted">{{ profile_user.phone }}</span>
                    </div>
                    {% elif not profile_user.show_phone and user == profile_user %}
                    <div class="mb-3">
                        <strong>手机号：</strong>
                        <span class="text-muted"><i class="fas fa-lock text-warning me-1"></i>已隐藏</span>
                    </div>
                    {% endif %}

                    <!-- 所在地 - 根据隐私设置显示 -->
                    {% if profile_user.location and profile_user.show_location %}
                    <div class="mb-3">
                        <strong>所在地：</strong>
                        <span class="text-muted">{{ profile_user.location }}</span>
                    </div>
                    {% elif not profile_user.show_location and user == profile_user %}
                    <div class="mb-3">
                        <strong>所在地：</strong>
                        <span class="text-muted"><i class="fas fa-lock text-warning me-1"></i>已隐藏</span>
                    </div>
                    {% endif %}

                    {% if profile_user.interests %}
                    <div class="mb-3">
                        <strong>兴趣：</strong>
                        <div class="mt-1">
                            {% for interest in profile_user.interests.split %}
                            <span class="badge bg-light text-dark me-1 mb-1">{{ interest }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div> <!-- 结束左侧列 -->

        <!-- 用户内容 - 右侧列 -->
        <div class="col-lg-8">
            <!-- 活动统计 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>活动统计</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-3">
                            <div class="h3 text-primary mb-1">{{ events_organized }}</div>
                            <small class="text-muted">发起活动</small>
                        </div>
                        <div class="col-3">
                            <div class="h3 text-success mb-1">{{ events_attended }}</div>
                            <small class="text-muted">参加活动</small>
                        </div>
                        <div class="col-3">
                            <div class="h3 text-warning mb-1">{{ posts_count }}</div>
                            <small class="text-muted">发布帖子</small>
                        </div>
                        <div class="col-3">
                            <div class="h3 text-info mb-1">{{ reviews_count }}</div>
                            <small class="text-muted">发表评价</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近参与的活动 -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>最近参与的活动</h5>
                    <a href="{% url 'customer:my_registrations' %}" class="btn btn-sm btn-outline-primary">查看全部</a>
                </div>
                <div class="card-body">
                    {% for registration in recent_events %}
                    <div class="mb-3 pb-3 border-bottom">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">
                                    <a href="{% url 'location:activity_detail' registration.event.id %}" class="text-decoration-none">
                                        {{ registration.event.title }}
                                    </a>
                                </h6>
                                <div class="text-muted small">
                                    <span class="me-3"><i class="fas fa-map-marker-alt me-1"></i>{{ registration.event.location }}</span>
                                    <span><i class="fas fa-clock me-1"></i>{{ registration.event.start_time|date:"m月d日 H:i" }}</span>
                                </div>
                            </div>
                            <span class="badge {% if registration.event.status == 'completed' %}bg-success{% else %}bg-primary{% endif %}">
                                {{ registration.event.get_status_display }}
                            </span>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-3">
                        <p class="text-muted mb-0">还没有参与过活动</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- 最近发布的帖子 -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i>最近发布的帖子</h5>
                    <a href="{% url 'location:community_posts' %}?author={{ profile_user.id }}" class="btn btn-sm btn-outline-primary">查看全部</a>
                </div>
                <div class="card-body">
                    {% for post in recent_posts %}
                    <div class="mb-3 pb-3 border-bottom">
                        <h6 class="mb-2">
                            <a href="{% url 'location:post_detail' post.id %}" class="text-decoration-none">
                                {{ post.title }}
                            </a>
                            <span class="badge bg-secondary ms-2">{{ post.get_post_type_display }}</span>
                        </h6>
                        <p class="text-muted small mb-2">
                            {{ post.content|striptags|truncatechars:100 }}
                        </p>
                        <div class="d-flex justify-content-between align-items-center text-muted small">
                            <span>{{ post.created_at|timesince }}前</span>
                            <div>
                                <span class="me-3"><i class="fas fa-eye me-1"></i>{{ post.views_count }}</span>
                                <span class="me-3"><i class="fas fa-comment me-1"></i>{{ post.comments_count }}</span>
                                <span><i class="fas fa-heart me-1"></i>{{ post.likes_count }}</span>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-3">
                        <p class="text-muted mb-0">还没有发布过帖子</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div> <!-- 结束右侧列 -->
    </div> <!-- 结束 row -->
</div>

<script>
async function toggleFollow(userId) {
    try {
        const response = await fetch(`/location/social/follow/${userId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        });

        const result = await response.json();

        if (result.status === 'success') {
            const followButton = document.getElementById('followButton');
            if (result.following) {
                followButton.innerHTML = '<i class="fas fa-check me-2"></i>已关注';
                followButton.classList.remove('btn-primary');
                followButton.classList.add('btn-success');
            } else {
                followButton.innerHTML = '<i class="fas fa-plus me-2"></i>关注';
                followButton.classList.remove('btn-success');
                followButton.classList.add('btn-primary');
            }

            // 更新粉丝数显示
            document.querySelector('.row.text-center .col-4:first-child .h5').textContent = result.followers_count;
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

function sendMessage(userId) {
    window.location.href = `/location/social/messages/${userId}/`;
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>

<style>
.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.card-header {
    background: rgba(0,0,0,0.02);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.btn {
    border-radius: 8px;
}
</style>
{% endblock %}